<template>
    <div id="main" ref="main"></div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: 'RecordsChart',
        mounted(){
            this.$nextTick(() => {
                this.initChart();
            });
        },
        methods:{
            initChart(){
                this.echart = echarts.init(this.$refs.main)
                var options =  {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                    },
                    series: [
                        {
                            name: '2011',
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230]
                        },
                    ]
                }
                this.echart.setOption(options)
            },
        }
    }
</script>

<style>
    #main{
        height: 400px;
        width: 80%;
        
    }
</style>